<template>
  <div id="mylearn">
    <br />
    <br />
    <van-nav-bar title="我的学习" class="navbar" />
    <!-- 第一个卡片 -->
    <el-card class="card" style="max-width: 50.5vh">
      <p class="item">
        <chart />
      </p>
    </el-card>
    <!-- 第二个卡片 -->
    <el-card class="card" style="max-width: 50.5vh">
      <div class="item2">
        <div>36分钟</div>
        <div>2天</div>
        <div>54小时</div>
      </div>
      <div class="item3">
        <div>今日学习</div>
        <div>连续学习</div>
        <div>累计学习</div>
      </div>
    </el-card>
    <!-- 第三个卡片 -->
    <el-card class="card" style="max-width: 50.5vh" @click="router.push('/lastlearn')">
      <div class="item4head">
        <h6>最近学习</h6>
        <van-icon name="arrow" class="arrow" />
      </div>
      <div>
        <van-swipe :loop="true" class="item4swiper" :show-indicators="false">
          <van-swipe-item class="swiper1">
            <div class="swiper1-1">
              <div></div>
              <van-image
                width="13vh"
                height="11vh"
                fit="contain"
                src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
              />
              <div class="swsize">母猪的产后护理</div>
            </div>
            <div class="swiper1-1">
              <van-image
                width="13vh"
                height="11vh"
                fit="contain"
                src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
              />
              <div class="swsize">母猪的产后护理</div>
            </div>
            <div class="swiper1-1">
              <van-image
                width="13vh"
                height="11vh"
                fit="contain"
                src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
              />
              <div class="swsize">母猪的产后护理</div>
            </div>
          </van-swipe-item>
          <van-swipe-item>2</van-swipe-item>
          <van-swipe-item>3</van-swipe-item>
          <van-swipe-item>4</van-swipe-item>
        </van-swipe>
      </div>
    </el-card>
    <!-- 第死个卡片 -->
    <el-card class="card" style="max-width: 50.5vh" @click="oncli('付费课程')">
      <div class="item4head">
        <h6>付费课程</h6>
        <van-icon name="arrow" class="arrow" />
      </div>
    </el-card>
    <!-- 第五个卡片 -->
    <el-card class="card" style="max-width: 50.5vh"  @click="oncli('免费课程')">
      <div class="item4head">
        <h6>免费课程</h6>
        <van-icon name="arrow" class="arrow" />
      </div>
    </el-card>
    <!-- 第六个卡片 -->
    <el-card class="card" style="max-width: 50.5vh" @click="router.push('/cache')">
      <div class="item4head">
        <h6>缓存管理</h6>
        <van-icon name="arrow" class="arrow" />
      </div>
    </el-card>
    <!-- 第七个卡片 -->
    <el-card class="card" style="max-width: 50.5vh" @click="router.push('/coll')">
      <div class="item4head">
        <h6>我的收藏</h6>
        <van-icon name="arrow" class="arrow" />
      </div>
    </el-card>
  </div>
</template>

<script setup>
import chart from "./echarts.vue";
import {useRouter} from "vue-router";

const router = useRouter();
const oncli=(dx)=>{
  router.push({path:'/payfree',query:{name:dx}})
}

</script>

<style lang="scss" scoped>
#mylearn {
  background-color: rgba(242, 242, 242, 1);
  height: 124vh;
  text-align: center;
  

  .navbar {
    position: fixed;
    top: 0;
    width: 100%;
  }

  .card {
    margin: 0 auto;
    margin-bottom: 1vh;
    border-radius: 2vh;

    .item {
      height: 25.9vh;
    }

    .item2 {
      display: flex;
      /* 默认值 从左向右排列 */
      flex-direction: row;
      justify-content: space-around;
    }

    .item3 {
      display: flex;
      /* 默认值 从左向右排列 */
      flex-direction: row;
      justify-content: space-around;
      div {
        color: #989898;
        font-size: 2vh;
      }
    }
    .item4head {
      display: flex;
      justify-content: space-between;
      .arrow {
        font-size: 2.5vh;
        line-height: 3vh;
      }
      h6 {
        font-weight: bold;
      }
    }
    .item4swiper {
      height: 15vh;
      .swiper1 {
        justify-content: space-between;
        display: flex;
        .swiper1-1 {
          display: inline-block;
          width: 10vh;
          .swsize {
            font-size: 9px;
            color: black;
            font-weight: bold;
          }
        }
      }
    }
  }
}
</style>